<template>
    <!-- <TagsView/> -->

    <!-- 企业对标 -->
    <div class="container">
        <el-row class="" style="margin-bottom: 20px">
            <el-col :span="10" align="left">
                <span style="font-weight: bold;">{{route.query.age}}年度考核-{{data.allDetail.companyName}}- 企业对标报告 </span>
            </el-col>
            <el-col :span="14" align="right">
                <el-button @click="router.go(-1)">返回</el-button>
                <!-- <el-button type="primary">打印</el-button> -->
                <el-button type="primary" @click="down()">下载</el-button>
            </el-col>
        </el-row>


        <div class="banner" id="myDiv">
            <p class="title">{{data.allDetail.questionBank ? data.allDetail.questionBank.age : ''}}年度考核   企业对标报告</p>
            <!-- <p class="title2"><span>单位：{{data.allDetail.companyName}}</span><span>自评总分：{{ data.allDetail.selfAddPoints +  data.allDetail.selfPlusPoints}}</span></p> -->
            <div class="table1">
                <p> <b>单位：{{ data.allDetail.companyName }}</b>      数字化管理体系(填报部分)系统得分{{data.allDetail.compareScoreRankDTO ? data.allDetail.compareScoreRankDTO.repeatScore : ''}}分，排名为 第{{data.allDetail.compareScoreRankDTO ? data.allDetail.compareScoreRankDTO.ranks : ''}}名。</p>
                <p>对标结果为：
                    <ul>
                        <li v-for="(item,index) in data.allDetail.compareScoreRankDTOList" :key="index">
                            {{ item.companyName  }}  得分：{{ item.repeatScore }}分， 排名为 第 {{ item.ranks }} 名。
                        </li>
                    </ul>
                </p>
            </div>
            <el-table
            :data="data.allDetail.questionList" border
            style="width: 100%">
              <el-table-column label="指标名称" width="180">
                <template #default="scope">
                    {{ scope.row.number }} {{ scope.row.title }}
                </template>
              </el-table-column>
              <el-table-column prop="date" label="选项" >
                <template #default="scope">
                    <div v-for="item in scope.row.questionItemList" :key="item.id">
                        <!-- 单选 -->
                        <p v-if="scope.row.questionType == '1'">
                              <input
                                type="radio"
                                disabled
                                value="用户"
                                :checked="item.answerItem ? item.answerItem.repeatCheckedFlag : false"
                              />
                              {{ item.number }} {{ item.title }} （{{ item.itemScore }}）
                            </p>
                            <!-- 多选 -->
                            <p v-if="scope.row.questionType == '2'">
                              <input
                                type="checkbox"
                                disabled
                                value="用户"
                                :checked="item.answerItem ? item.answerItem.repeatCheckedFlag : false"
                              />
                              {{ item.number }} {{ item.title }} （{{ item.itemScore }}）
                            </p>
                            <!-- 填空 -->
                            <p v-if="scope.row.questionType == '3'">
                              <span>{{ item.number }} {{ item.title }}</span><br>
                              <span v-if="item.answerItem" style="min-width: 50%;padding:0 10px;border: 1px solid #ebeef5;display: inline-block;">
                                {{ item.answerItem.repeatInput }}
                              </span>
                              <!-- <el-input
                                v-if="item.answerItem"
                                v-model="item.answerItem.repeatInput"
                                style="width: 70%;"
                                disabled
                              ></el-input> -->
                            </p>
                    </div>
                </template>
              </el-table-column>
<!--              <el-table-column prop="standardScore" label="得分" width="180"></el-table-column>-->
              <el-table-column prop="answer.repeatScore" label="得分" width="180"></el-table-column>
              <el-table-column prop="avgScore" label="平均得分" width="180"></el-table-column>
              <el-table-column prop="ranks" label="指标排名" width="180"></el-table-column>
            </el-table>
        </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import Catalog from '../../../project/components/Catalog/index.vue'
import * as api from '../../api/eachUnit'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { dataDictionary } from '@/api/dict'
import pubFc from '@/views/examineManage/utils'
import { deepClone } from '@/utils'
import TagsView from '@/components/Layout/components/TagsView/index.vue'

const route = useRoute()
const router = useRouter()
const data = reactive({
  allDetail:{} as any,//所有详情的数据
  tableData: [] as any,//关于考核题目的数据
})

//下载
const down = () =>{
    var newstr = document.getElementById('myDiv')!.innerHTML //得到需要打印的元素HTML
        //（2）保存当前页面的整个html，因为window.print()打印操作是打印当前页的所有内容，所以先将当前页面保存起来，之后便于恢复。
        var oldstr = document.body.innerHTML //保存当前页面的HTML
        //（3）把当前页面替换为打印内容HTML
        document.body.innerHTML = newstr
        //（4）执行打印操作
        window.print()
        //（5）还原当前页面
        document.body.innerHTML = oldstr
        window.location.reload()
}
//获取数据
const getData = () => {
// console.log('route.params.id,companyIds:route.query.list',route.query);
  api.getCompare({ companyBankId: route.query.id,companyIds:route.query.list }).then((res) => {
    data.allDetail = res.data.data
    data.tableData = res.data.data.questionList
    console.log('企业对标获取数据', data.allDetail)
  })
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
  overflow-y: auto;
}
.banner {
  width: 100%;
  margin-top: 40px;
  .title {
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    font-size: 20px;
  }
  .table1{
    border: 1px solid #ebeef5;
    padding: 10px;
    color: #606266;
    ul{
        li{
            list-style: none;
        }
    }
  }
}
</style>
